<template>
    <!-- 共享的侧边栏和顶部栏布局与Home.vue相同 -->
    <aside class="sidebar">
        <div class="sidebar-header">
            <h2>荣科智能</h2>
            <p>综合生产系统</p>
        </div>
        <ul class="sidebar-menu">
            <li class="active">
                <router-link to="/" class="router-link" exact-active-class="active">
                    <font-awesome-icon icon="home" /> 仪表盘
                </router-link>
            </li>
            <li>
                <router-link to="/production-plan" class="router-link" exact-active-class="active">
                    <font-awesome-icon icon="project-diagram" /> 生产计划
                </router-link>
            </li>
            <li>
                <router-link to="/inventory" class="router-link" exact-active-class="active">
                    <font-awesome-icon icon="cubes" /> 库存管理
                </router-link>
            </li>
            <li>
                <router-link to="/quality-inspection" class="router-link" exact-active-class="active">
                    <font-awesome-icon icon="check-circle" /> 质检管理
                </router-link>
            </li>
            <li>
                <router-link to="/equipment" class="router-link" exact-active-class="active">
                    <font-awesome-icon icon="cogs" /> 设备管理
                </router-link>
            </li>
            <li>
                <router-link to="/reports" class="router-link" exact-active-class="active">
                    <font-awesome-icon icon="chart-bar" /> 报表分析
                </router-link>
            </li>
            <li>
                <router-link to="/exceptions" class="router-link" exact-active-class="active">
                    <font-awesome-icon icon="exclamation-triangle" /> 异常处理
                </router-link>
            </li>
        </ul>
    </aside>
</template>

<script setup>
import { ref, reactive } from 'vue';
const data = reactive({})

</script>

<style scoped>
.sidebar {
    width: 250px;
    background-color: #1a1a1a;
    color: white;
    padding: 1.5rem 0;
}

.sidebar-header {
    padding: 0 1.5rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-menu {
    list-style: none;
    padding: 1rem 0;
}

.sidebar-menu li {
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
}

.sidebar-menu li:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-menu li.active {
    background-color: #2c80ff;
}

.sidebar-menu svg {
    margin-right: 0.75rem;
    width: 20px;
    text-align: center;
}
</style>